<template>
  <div v-if="visible" class="fixed w-full h-full left-0 top-0 flex-center bg-[rgba(0,0,0,0.5)]">
    <div class="text-14px rounded-20px px-5px py-15px bg-#1E2328 text-#fff h-500px w-360px">
      <div class="flex items-center justify-between px-10px mb-10px h-30px">
        <div>
          <el-icon size="20" @click="back()" class="cursor-pointer" v-if="step===1">
            <Back />
          </el-icon>
        </div>
        <el-icon size="20" @click="hideFn()" class="cursor-pointer">
          <Close />
        </el-icon>
      </div>
      <div class="px-30px pb-10px">
        <div>
          <p class="text-20px my-0">{{cenArr[step].title}}</p>
          <p class="text-12px text-#959AA2 pt-10px my-0">{{cenArr[step].text}}</p>
        </div>
        <template v-if="step===0">
          <div class="py-20px">
            <div v-html="bindObj.img" class="bg-#fff p-10px rounded-5px mx-auto size-220px flex-center relative"
              v-loading="loading"></div>
          </div>
          <div class="text-center pb-20px">
            <p class="text-14px m-0">{{bindObj.key ||$t('validator.text4') }}
              <!-- <el-icon>
                <DocumentCopy @click="copyFn('asdkhalksh')" />
              </el-icon> -->
            </p>
            <p class="text-12px text-#959AA2 m-0">{{ $t('validator.text2') }}</p>
          </div>
        </template>
        <template v-else>
          <div class="pt-20px pb-30px">
            <p class="text-12px text-#959AA2 mb-5px mt-0">{{$t('validator.text3')}}</p>
            <input type="text" v-model="codes"
              class="border border-solid border-#959AA2 h-38px px-10px rounded-5px w-full" @keyup.enter="btnClick" />
          </div>
        </template>

        <el-button :loading="subLoading" type="primary" size="large" class="w-full" @click.prevent="btnClick">
          {{cenArr[step].btn}}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import AuthAPI from "@/api/auth";
const emit = defineEmits(['subClick'])
const { t } = useI18n();
const visible = ref(false)
const step = ref(0)
const loading = ref(true)
const subLoading = ref(false)
const cenArr = [
  { title: t('validator.title'), text: t('validator.text'), btn: t('btn.12') },
  { title: t('validator.title1'), text: t('validator.text1'), btn: t('btn.14') },
  { title: t('validator.title2'), text: t('validator.text1'), btn: t('btn.14') },
]
const bindObj = ref({
  type: 'verify',
  img: '',
  key: ''
})
const showFn = async (type = 'verify', fun) => {
  bindObj.value.type = type
  codes.value = ''
  visible.value = true
  if (type === 'bind') {
    step.value = 0
    const codeData = await AuthAPI.twoQrCode()
    loading.value = false
    bindObj.value.img = codeData.data.svg
    const keyData = await AuthAPI.twoKey()
    bindObj.value.key = keyData.data.secret_key
  } else {
    step.value = 2
  }
}
const hideFn = (type) => {
  console.log(type);

  subLoading.value = false
  if (!type) {
    visible.value = false
  }
}
const codes = ref('')
const btnClick = () => {
  if (bindObj.value.type === 'bind') {
    if (step.value === 0) {
      step.value++
    } else {
      subLoading.value = true
      emit('subClick', { code: codes.value, type: bindObj.value.type })
    }
  } else {
    subLoading.value = true
    emit('subClick', { code: codes.value, type: bindObj.value.type })
  }
}
const back = () => {
  if (bindObj.value.type === 'verify') {
    hideFn()
  } else {
    step.value--
  }
}
defineExpose({ showFn, hideFn })
</script>